<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <!-- <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
          当前位置：
          <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
          <router-link to="/duanxin" style="color: #409eff;">短信中心</router-link>>
          新建短信任务
        </div> -->
          <!-- <div class="hei10"></div> -->

        <div class="powertop">
          <router-link class="powertopli " to="/duanxin">任务管理</router-link>
          <router-link class="powertopli powertopact" to="/duanxin/addrenwu2">指定号码发送短信</router-link>
          <router-link class="powertopli" to="/duanxin/fasongjilu">发送记录</router-link>
          <router-link class="powertopli" to="/duanxin/duanxinmoban">短信模板管理</router-link>
        </div>
        <div class="conlist" v-loading='loading'>

          <el-form ref="form" @submit.native.prevent v-model="form" label-width="120px" class="form">

            <el-form-item label="选择号码方式:">
              <el-radio v-model="renwu.type2" @change="renwu.mobile = ''" label="1">按输入号码发送</el-radio>
              <el-radio v-model="renwu.type2" @change="renwu.mobile = ''" label="2">按导入号码发送</el-radio>
              <el-radio v-model="renwu.type2" @change="renwu.mobile = ''" label="3" v-if="shopid == 304676 || shopid == 50481">选择已创建的人群</el-radio>
            </el-form-item>

            <div v-if="renwu.type2 == 3" style="padding: 20px;">

              <div style="display: flex; margin-bottom: 20px;">
                <el-input v-model="search.title" style="width: 280px; margin-right: 20px;" placeholder="人群名称"></el-input>
                <el-select v-model="search.type" style="width: 280px; margin-right: 20px;" placeholder="人群类型">
                  <el-option :value="item.id" v-for="item in fenleilist" :key="item.id" :label="item.title"></el-option>
                </el-select>
                <el-button round @click="searchs" type="primary" plain>搜索</el-button>
              </div>

              <div v-for="item in list2" :key="item.id" style="padding: 10px; background: rgb(240, 249, 254); width: 600px; margin-bottom: 10px; font-size: 12px;">
                <div class="kflexbc">
                  <div style="flex: 4; overflow: hidden;">
                    <div class="kflexc">
                      <div><el-button type="primary" size="mini">{{item.type}}</el-button></div>
                      <div style="margin-left: 10px;">{{item.title}}</div>
                    </div>
                    <div class="kflexc" style="margin-top: 10px; ">
                      <div  style=" color: rgb(147, 147, 147);">{{item.remark}}</div>
                    </div>
                  </div>
                  <div style="flex: 1;">数量：{{item.user_amount}}</div>
                  <div style="flex: 1;">
                    <el-button type="primary" size="mini" plain v-if="all2.crowd_id != item.id" @click="all2.crowd_id = item.id">选择</el-button>
                    <div v-if="all2.crowd_id == item.id">已选择</div>
                  </div>
                </div>
              </div>
            </div>

            <el-form-item label="发送号码:" v-if="renwu.type2 == 1">
              <el-input v-model="renwu.mobile" type="textarea" :rows="5" placeholder="回车换行,一行一个"></el-input>
            </el-form-item>

            <el-form-item label="导入号码:" v-if="renwu.type2 == 2">
              <div class="flex">
                <upload-excel-component @on-selected-file="exportData" buttonName="上传文件"></upload-excel-component>
                <div style="margin-left: 20px; color: #0074D9;" v-if="renwu.mobile != ''">已上传{{renwu.mobile.length}}个手机号
                </div>
                <div style="margin-left: 20px;" v-if="renwu.mobile == ''">请上传文件</div>
                <el-button type="text" style="margin-left: 20px;" @click="xiazai">模板下载</el-button>
              </div>
            </el-form-item>
            <el-form-item  label="短信签名:">
              <el-radio v-model="renwu.sign" v-for="item in qianminglist" :key="item.id" :label="item.id">{{item.name}}
              </el-radio>
              <el-tooltip class="item" effect="light" content="您可联系我们提交相关资料，我们帮您申请您专属的签名" placement="top">
                <span class="wenhao">?</span>
              </el-tooltip>
              <!-- <el-button type="primary" size="mini" style="float: right; position: relative; top: 10px;"
                @click="showsign = true">申请签名</el-button> -->
<el-button type="text" round @click="goid('/duanxin/duanxinqianmingguanli');" style="float: right; position: relative; top: 10px;">短信签名管理</el-button>
            </el-form-item>
            <el-form-item label="短信内容:">
              <el-select v-model="renwu.type" clearable @change="getlist2()" placeholder="模板类型">
                <el-option label="下单提醒" value="1"></el-option>
                <el-option label="订单信息完善" value="2"></el-option>
                <el-option label="开卡结果通知" value="3"></el-option>
                <el-option label="发货通知" value="4"></el-option>
                <el-option label="催促激活" value="5"></el-option>
                <el-option label="营销类短信" value="7"></el-option>
                <el-option label="其他" value="6"></el-option>
              </el-select>
              <el-select v-model="renwu.formwork_id" clearable placeholder="短信模板">
                <el-option :label="item.name" v-for="item in tableData" :key="item.id" :value="item.id"></el-option>
              </el-select>
              <el-button type="text" @click="go('/duanxin/duanxinmoban')">新建模板</el-button>
            </el-form-item>
            <!-- <el-form-item label="模板类型:">
							<el-select v-model="renwu.type" clearable @change="getlist2()" placeholder="模板类型">
							    <el-option label="下单提醒" value="1"></el-option>
							    <el-option label="订单信息完善" value="2"></el-option>
							    <el-option label="开卡结果通知" value="3"></el-option>
								<el-option label="发货通知" value="4"></el-option>
								<el-option label="催促激活" value="5"></el-option>
								<el-option label="其他" value="6"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="短信模板:">
							<el-select v-model="renwu.formwork_id" clearable  placeholder="短信模板">
							    <el-option :label="item.name" v-for="item in tableData" :key="item.id" :value="item.id"></el-option>
							</el-select>
						</el-form-item> -->
            <!-- <el-form-item label="短信内容:">
							<div class="shuru">
								<div class="shurutop">已输入<span class="red">{{zishu}}</span>个字，共计<span class="red">{{tiaoshu}}</span>条短信。
									<el-tooltip class="item" effect="light" content="70字记一条短信费，超出70字则以67字每条计费。" placement="top">
										<span style="color: #8E65B7; cursor: pointer;">计费规则</span>
									</el-tooltip>
								</div>
								<el-input type="textarea" @input="jishu" :rows="5" placeholder="请输入内容" v-model="renwu.content"></el-input>
							</div>

						</el-form-item> -->

            <el-form-item label=" ">
              <div class="wenxin">
                <p>温馨提示： </p>
                <p>1) 请留意短信内的敏感字词，例如：联通、电信、移动等可能导致短信被运营商拦截。 </p>
                <p>2) 短信内容包含：特卖、优惠、限时等营销词语可能会被手机安全软件拦截。 </p>
                <p>3) 发送网址请确保前后已加空格否则可能导致手机端网址无法打开。</p>
              </div>
            </el-form-item>
          </el-form>
          <div class="flexm" style="margin-left: 100px;">
            <el-button type="danger" round size="medium" @click="chuangjian" :disabled="ing">{{chuangjianw}}</el-button>
            <span class="red" style="margin: 0 20px; font-size: 14px;">当前剩余：{{duanxintiaoshu}}条</span>
            <router-link to="/duanxin/duanxinchongzhi">充值短信</router-link>
          </div>
          <uses ref='uses'></uses>

        </div>
      </div>
    </div>

    <el-dialog title="申请签名" center="" :visible.sync="showsign" :close-on-press-escape="false" :close-on-click-modal="false"
      width="600px">
      <div>
        <el-form ref="form" @submit.native.prevent v-model="form" label-width="120px" class="form">
          <el-form-item label="申请签名名称：">
            <el-input v-model="signname"></el-input>
          </el-form-item>
          <el-form-item label="称呼：">
            <el-input v-model="signxingming"></el-input>
          </el-form-item>
          <el-form-item label="手机号：">
            <el-input v-model="signmobile"></el-input>
          </el-form-item>
          <el-form-item label="">
            注：我们将会在48小时内联系您，准备好相关资料后申请
          </el-form-item>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button round type="info" @click="showsign = false">取 消</el-button>
        <el-button type="danger" round @click="addsign" :disabled="addsigning">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="添加来源" center :visible.sync="laiyuanshow" :close-on-press-escape="false" :close-on-click-modal="false"
      width="600px">
      <div>
        <el-form ref="form" @submit.native.prevent v-model="form" class="form">
          <el-form-item>
            <el-input v-model="tuiguanglaiyuan.source" style="width: 250px;" placeholder="来源分类：例：“PDD”或“新媒体”">
            </el-input>
            -
            <el-input v-model="tuiguanglaiyuan.name" style="width: 250px;" placeholder="来源名称：例：”百度、搜狗”等"></el-input>

          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button round type="info" @click="laiyuanshow = false">取 消</el-button>
        <el-button type="danger" round @click="tianjia">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <foot></foot> -->
  </div>

</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import use from '@/components/duanxin/use.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import duanxinci from '../../../public/duanxin'
  import UploadExcelComponent from "@/components/UploadExcel/index.vue";
  import moment from "moment";
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
      "uses": use,
      UploadExcelComponent
    },
    name: "addrenwu2",
    data() {
      return {
		addsigning:false,
        laiyuanshow: false,
        signname: "",
        signxingming: "",
        signmobile: "",
        chuangjianw: "立即发送",
        id: "",
        loading: true,
        form: "",
        renwu: {
          type2: '1',
          mobile: [],
          content: "",
          sign: "",
          formwork_id: "",
          type: ""
        },
        ing: false,
        sourcelist: "",
        qianminglist: [],
        zishu: "0",
        tiaoshu: "1",
        shoplist: "",
        duanxintiaoshu: "",
        showsign: false,
        photo: false,
        daunxinci: '',
        tuiguanglaiyuan: {
          source: "",
          name: ""
        },
        tableData: "",
        shopid:'',
        list2:"",
        search:{
          page:1,
          page_size:20,
          title:"",
          type:""
        },
        all2:{
          crowd_id:""
        },
        fenleilist:""
      }
    },
    async created() {
       //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      await this.getlist2()
      await this.getsign();
      this.loading = false

      this.getmessagenumbers()
      this.gengxin()
    },
    mounted() {
      // this.$refs.uses

    },
    methods: {
      gengxin:function(){
        axios.get("/api/plan-market/crowd/type/list")
          .then( response => {
            if (response.data.msg.code == 0) {
              this.fenleilist = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      searchs:function(){
        axios.post("/api/plan-market/crowd/list",this.search)
          .then( response => {
            if (response.data.msg.code == 0) {
              this.list2 = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      go: function(url) {
        this.$router.push({
          path: url
        })
      },
      //获取全部
      getlist2: async function() {
        var that = this
        await axios.get('/api/plan-market/message/formwork/list?flag=1&type=' + this.renwu.type)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data
              this.renwu.formwork_id = ''

            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      xiazai: function() {
        const a = document.createElement('a');
        a.setAttribute('download', '上传手机号.xlsx');
        a.setAttribute('href', window.location.origin + "/" + 'static/shangchuanshoujihao.xlsx');
        a.click();
      },
      exportData(data) {

        var that = this;
        var list = []

        //导入的导入修改数据
        if (data.header[0] == "手机号") {
          for (let i in data.results) {
            list.push(data.results[i]['手机号'])
          }
          this.renwu.mobile = list
          console.log(this.renwu.mobile)
        }
      },


      //申请签名
      addsign: function() {
        var that = this
		this.addsigning = true
        axios.post('/api/plan-market/message/addsign', {
            signname: this.signname,
            signxingming: this.signxingming,
            signmobile: this.signmobile
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              that.$message.success('已申请，请等待联系');
              that.signname = ''
              that.signxingming = ''
              that.signmobile = ''
              that.showsign = false
			  this.addsign = false
            } else {
              that.$message.error(response.data.msg.info);
			  this.addsigning = false
            }
          })
      },

      //获取短信剩余条数
      getmessagenumbers: function() {
        this.ing = true
        var that = this
        axios.get('/api/plan-market/message/getmessagenumbers')
          .then(response => {
            if (response.data.msg.code == 0) {
              that.duanxintiaoshu = response.data.data.message_recharge
              that.ing = false
            } else {
              that.$message.error(response.data.msg.info);
              that.ing = false
            }
          })
      },


      //创建任务
      chuangjian: function() {
        var that = this
        if (this.$refs.uses.use == false) {
          this.$refs.uses.show = true
        } else {


          let content = ''
          this.tableData.forEach(item => {
            if (item.id == this.renwu.formwork_id) {
              content = item.content
            }
          })
          if(this.renwu.type2 != 3){
            if (this.renwu.mobile == '') {
              this.$message.error('请输入发送号码！')
              return false
            }
          }



          axios.get("/api/plan-market/message/word/num?sign=" + this.renwu.sign + '&content=' + content)
            .then((response) => {
              if (response.data.msg.code == 0) {

                that.$confirm('当前短信任务共计' + response.data.data.num + '字，记为' + response.data.data.fee + '条短信，请确认！',
                  '提示', {
                    confirmButtonText: '确定创建',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {

                  if (this.renwu.type2 == 1 && this.renwu.mobile != '') {
                    this.renwu.mobile = this.renwu.mobile.split(/\n/)
                    for (let i in this.renwu.mobile) {
                      this.renwu.mobile[i] = this.renwu.mobile[i].trim()
                    }
                  }



                  if(this.renwu.type2 == 3){
                    if(!this.all2.crowd_id){
                      this.$message.error('请搜索并选择人群');
                      return false
                    }
                    var params = {};

                    params['sign'] = this.renwu.sign
                    params['content'] = content
                    params['type'] = this.renwu.type
                    params['crowd_id'] = this.all2.crowd_id
                    params['formwork_id'] = this.renwu.formwork_id
                    params['flag'] = 2

                    axios.post('/api/plan-market/crowd/sms-send',params)
                      .then(response => {
                        if (response.data.msg.code == 0) {
                          this.$message.success('发布成功');

                        } else {
                          this.$message.error(response.data.msg.info);
                        }
                      })

                  }else{
                    var params = {};

                    params['mobiles'] = this.renwu.mobile;
                    params['sign'] = this.renwu.sign;
                    params['content'] = content;
                    params['type'] = this.renwu.type;
                    params['formwork_id'] = this.renwu.formwork_id;
                    axios.post("/api/plan-market/message/messages_send", params)
                      .then(function(response2) {
                        if (response2.data.msg.code == 0) {
                          that.$message.success('发布成功');
                          that.renwu.mobile = []
                        } else {
                          that.$message.error(response2.data.msg.info);
                        }
                      })
                  }




                })



              } else {
                that.$message.error(response.data.msg.info);
              }
            })


        }


      },

      //获取签名
      getsign: async function() {
        var that = this;
        await axios.get('/api/plan-market/message/getsign')
          .then(response => {
            if (response.data.msg.code == 0) {
              that.qianminglist = response.data.data
              if (that.qianminglist == '') {
                that.renwu.sign = ''
              }
            } else {
              if (response.data.msg.code == 50401) {
                that.$router.push({
                  path: "/login"
                });
                return false
              }
              that.$message.error(response.data.msg.info);
            }
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .index {
     /deep/ .el-textarea{ width: 600px;}

     /deep/ .el-button--danger {
         color: #FFF;
         background-color: #2974FF;
         border-color: #2974FF;
     }

    .powertop {
      display: flex;
      background:#f9f9f9;
    }

    #drop .el-button--primary {
      background-color: #EEF7FF;
      border: 1px #EEF7FF solid;
      padding: 8px 20px !important;
    }

    .powertopli {
      flex-basis: 180px;
      line-height: 50px;
      border-bottom: 3px #F9F9F9 solid;
      color: #727272;
      border-right: 1px #F9F9F9 solid;
      font-size: 16px;
      text-align: center;
    }

    .powertopact {
      background: #FFFFFF;
      border-bottom: 3px #2974FF solid;
    }


        .conlist {
          padding-bottom: 20px;
          background: #FFFFFF;
          min-height: 800px;

          .addrenwutitle {
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            font-size: 16px;
            border-bottom: 1px #EAEAEA solid;
          }

          .form {
            padding: 20px;

            .el-input {
              width: 300px;
            }
          }

          .flex {
            display: flex;
            flex-wrap: wrap;

            .el-select {
              margin-bottom: 20px;
            }

            label {
              display: block;
              width: 100%;
            }

            .el-input__icon {
              height: auto !important;
            }
          }

          .shuru {
            border: 1px #C8C9CC solid;

            .shurutop {
              background: #EAEAEA;
              padding-left: 20px;
              color: #666
            }

            /deep/ .el-textarea {
              padding: 10px 5px;
width: 400px;
              textarea {
                border: 0;
                outline: 0;

              }
            }

          }

          .red {
            color: #f00;
            font-weight: bold;
            margin: 0 5px;
            font-size: 18px;
          }

          .flexm {
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .wenxin {
            background: #DDDDDD;
            padding: 10px 20px;
            color: #646464;
            line-height: 20px;
          }

          .wenhao {
            background: #DDDDDD;
            color: #FFFFFF;
            line-height: 15px;
            cursor: pointer;
            padding: 5px 11px;
            margin-left: 20px;
            text-align: center;
            border-radius: 14px;
          }
        }

  }
</style>
